<template>
	<view class="target">
		<view class="target-nav">
			<view class="target-nav-name" v-if="!userInfo.newUserName">
				<view class="target-nav-name-surname" v-if="userInfo.employeeName">{{userInfo.employeeName.substr(0,1)}}</view>
				<view>{{userInfo.employeeName}}</view>
			</view>
			<view class="target-nav-name" v-else>
				<view class="target-nav-name-surname" v-if="userInfo.newUserName">{{userInfo.newUserName.substr(0,1)}}</view>
				<view>{{userInfo.newUserName}}</view>
			</view>
			<view class="target-nav-selectTime">
				<view>
					<picker mode="date" :value="startDate"  @change="setartDateChange">
						<view class="uni-input">{{startDate?startDate:'开始时间'}}</view>
					</picker>
				</view>
				<view>-</view>
				<view>
					<picker mode="date" :value="endDate" :start="startDate" @change="endDateChange">
						<view class="uni-input">{{endDate?endDate:'结束时间'}}</view>
					</picker>
				</view>	
			</view>
			
			<view class="target-nav-icon">
				<image class="target-nav-icon-unfold" src="@/static/image/target/unfold_icon.png"  @click="unfold = !unfold"></image>
				<image class="target-nav-icon-personnel" src="@/static/image/target/personnel_icon.png" @click="targetStaff"></image>
			</view>
		</view>
		<view class="target-tag">
			<view v-if="!userInfo.newUserName" class="target-tag-label">我负责的</view>
			<view v-else class="target-tag-label">他负责的</view>
			<view class="isAttention-Btn" v-if="userInfo.newUserName">
				<button v-if="isAttention" style="font-size: 26rpx;background-color: #eee;"  @click="attention('true')">已关注</button>
				<button v-else type="primary" class="attention" style="" @click="attention('false')">+ 关注</button>
			</view>
		</view>
		<view class="target-list">
			<view class="target-plus" @click="createTarget" v-if="!userInfo.newUserId">
				<image src="@/static/image/add_icon.png"></image>
			</view>
			<view class="target-list-item" v-for="(item,index) in okrList" :key="item.id">
				<view class="target-list-item-top">
					<view class="target-list-item-top-index">
						<view class="target-list-item-top-index-number">{{index+1}}</view>
					</view>
					<view class="target-list-item-top-info">
						<view class="target-list-item-top-info-interacting">
							<view>
								<view  v-if="item.keyResultId" @click="alignPopup(item,'true')" class="target-list-item-top-info-interacting-popup">
									<image src="@/static/image/target/align_icon.png"></image>
									<view style="color: #6fa71f;">已对齐</view>
								</view>
								<view v-else @click="alignPopup(item,'false')" class="target-list-item-top-info-interacting-popup">
									<image src="@/static/image/target/noneAlign_iocn.png"></image>
									<view style="color: #c20116;">未对齐</view>
								</view>
							</view>
							<view class="target-list-item-top-info-interacting-love">
								<view class="target-list-item-top-info-interacting-love-value" @click="heart(item)">
									{{[item.confidenceValue==1?90:'' || item.confidenceValue==2?70:'' || item.confidenceValue==3?60:'']}}
								</view>
								<image src="@/static/image/target/heart-fill_icon.png" @click="heart(item)"></image>
							</view>
						</view>
						<view class="target-list-item-top-info-title" @click="targetClick(item,index)">
							{{item.objectivesName}}
						</view>
						<view class="target-list-item-top-info-rank">
							<view class="target-list-item-top-info-rank-icon">
								<image src="@/static/image/login/user.png"></image>
								<view class="crossBar">|</view>
								<view>{{[item.type==1?'公司':'' || item.type==2?'部门':'' || item.type==3?'团队':'' || item.type==4?'个人':'']}}</view>
							</view>
							<view class="target-list-item-top-info-rank-schedule">
								<view class="target-list-item-top-info-rank-schedule-icon">
									<progress :percent="item.progressValue" border-radius='10' show-info active stroke-width="8" activeColor='#409eff' />
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-show="unfold" style="margin-bottom: 20rpx;">
					<view class="target-list-item-outcome" v-for="(value,idx) in item.list" :key="value.id">
						<view class="target-list-item-outcome-box">
							<view class="target-list-item-outcome-box-index">成果{{idx+1}}</view>
							<view class="target-list-item-outcome-box-explain">{{value.content}}</view>
						</view>
						<view class="target-list-item-outcome-schedule">
							<view class="target-list-item-outcome-schedule-box">
								<image v-if="!value.progressStatus" src="@/static/image/target/noneState_icon.png"></image>
								<image v-if="value.progressStatus==1" src="@/static/image/target/normal_icon.png"></image>
								<image v-if="value.progressStatus==2" src="@/static/image/target/risk_icon.png"></image>
								<image v-if="value.progressStatus==3" src="@/static/image/target/overdue_icon.png"></image>
							</view>
							<view style="width: 65rpx;text-align: right;">{{value.progressValue}}%</view>
						</view>
					</view>
				</view>
				<view class="target-list-item-bottom">
					<view class="target-list-item-bottom-record" @click="recordBtn(item)">记录</view>
					<view class="target-list-item-bottom-relevance">
						<view class="relevanceTag" @click="tagClick('Otask',item)" v-if="item.taskId">
							<view>任务</view>
						</view>
						<view class="relevanceTag" @click="tagClick('Oproject',item)" v-if="item.projectId">
							<view>项目</view>
						</view>
						<view v-if="!item.taskId || !item.projectId" @click="taskBtn(item)">关联</view>
					</view>
				</view>
			</view>
		</view>
		<popUp 
		:popUpType='popUpType' 
		:isShow="show"
		:userData="userInfo"
		:selectData="itemData"
		@closePopUp='closePopUp'
		></popUp>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import popUp from '../component/pop-up.vue';
	export default {
		components: {
			popUp,
		},
		data() {
			return {
				show:false,
				popUpType:'',
				itemData:{},
				checked:false,
				userInfo:{}, // 用户信息
				isAttention:false,
				okrList:[], // 首页列表数据
				staffShow:false, //选择人员
				choiceType:"",
				startDate:'',
				endDate:'',
				unfold: false, // 展开
				confidenceList: [ // 信心指弹出框选择框
					'基础目标（90%以上信心就能够完成）',
					'正常目标（70~90%信心就能够完成）',
					'基础目标（60~70%信心就能够完成）'
				],
				vertical: 'bottom',
				flg:false
			}
		},
		onLoad(option) {
			this.$nextTick(()=>{
				let data = getApp().globalData.userInfo
				data.employee.forEach(item=>{
					if(item.isDefault == '0'){
						this.userInfo = item
					}
				})
			})
		},
		onShow() { 
			let pages = getCurrentPages();  
			let nowPage = pages[pages.length - 1];
			let { newUserName,newUserId } = nowPage.data
			if(newUserId){
				if(newUserId !== this.userInfo.employeeId){
					this.userInfo.newUserName = newUserName
					this.userInfo.newUserId = newUserId
					this.getFocusOnList(newUserId)
				}
			}
			this.$nextTick(()=>{
				this.OKRList()
			})
		},
		onUnload(){
			this.userInfo.newUserName = ''
			this.userInfo.newUserId = ''
		},
		methods: {	
			setartDateChange(e) {
			    this.startDate = e.detail.value
				if(this.endDate){
					this.OKRList()
				}
			},		
			endDateChange(e) {
			    this.endDate = e.detail.value
				if(this.startDate){
					this.OKRList()
				}
			},
			OKRList(){
				let timeData = {
					startTime: this.startDate ? this.startDate : '',
					endTime: this.endDate ? this.endDate : '',
					employersId:this.userInfo.newUserId ? this.userInfo.newUserId : this.userInfo.employeeId
				}
				api.okrList(timeData).then(res => {
					if(res.code == 0){
						this.okrList = res.data.result
					}
				})
			},
			closePopUp(){
				this.show = false
				this.popUpType = ''
				this.OKRList()
			},
			alignPopup(item,type){ // 对齐目标弹窗
				
				if(this.userInfo.newUserId){
					return
				}
				if(this.userInfo.employeeId === item.employeeId){
					if(type == 'true'){
						this.popUpType = 'viewOorientation'
					}else{
						this.popUpType = 'orientation'
					}
					this.show = true
					this.itemData = item
				}
				
			},
			heart(item){ // 信心值弹窗
				if(this.userInfo.newUserId){
					return
				}
				if(this.userInfo.employeeId === item.employeeId){
					let that = this;
					uni.showActionSheet({
						itemList: that.confidenceList,
						success: function(res) {
							let data = {
								confidenceValue: res.tapIndex + 1,
								id:item.id
							}
							api.setObjectivesConfidenceValue(data).then(res=>{
								if(res.code == 0){
									uni.showToast({
										title: '设置成功',
										icon:'none',
										duration: 1000
									});	
									that.OKRList()
								}
							})
						}
					});	
				}
			},
			recordBtn(item){ // 请求进度记录
				this.show =  true
				this.itemData = item
				this.popUpType = 'schedule'
			},
			taskBtn(item){ // 关联弹窗
				if(this.userInfo.newUserId){
					return
				}
				if(this.userInfo.employeeId === item.employeeId){
					this.popUpType = 'Orelevance'
					this.itemData = item
					this.show = true
				}
			},
			getFocusOnList(newUserId){ // 获取关注列表
				api.getEmployees().then(res=>{
					if(res.code == 0){
						let { focusOnList } = res.data.result
						focusOnList.forEach(item=>{
							if(item.userId == newUserId){
								this.isAttention = true
							}else{
								this.isAttention = false
							}
						})	
					}
				})
			},
			attention(type){
				if(type=='true'){ // 取消关注
					api.unsubscribe(this.userInfo.newUserId).then(res=>{
						if(res.code == 0){
							this.isAttention = false
							uni.showToast({
								title:'取消关注成功',
								icon:'none',
								duration: 2000
							});	
						}
					})
				}else{ // 关注
					let data = {
						attentionUserId:this.userInfo.newUserId,
						attentionUserName:this.userInfo.newUserName
					}
					api.focusOn(data).then(res=>{
						if(res.code == 0){
							this.isAttention = true
							uni.showToast({
								title:'关注成功',
								icon:'none',
								duration: 2000
							});	
						}
					})
				}
			},
			tagClick(type,item){
				let url  
				if(type == 'Otask'){
					url = '/pages/mask/detail/detail?id=' + item.taskId
				}
				if(type == 'Oproject'){
					url = '/subcontractList/project/detail/index?id=' + item.projectId
				}
				uni.navigateTo({
					url
				});
			},
			targetClick(item,index){ // 跳转到目标详情
				let newUserId = this.userInfo.newUserId ? this.userInfo.newUserId : null
				let url = '/subcontractList/targetAdmin/index/particulars?id='+ item.id +'&sort='+ (index+1) +'&newUserId='+ newUserId
				uni.navigateTo({
				    url
				})
			},
			targetStaff(){ // 跳转到人员页面
				 uni.navigateTo({
				    url: '/subcontractList/targetAdmin/targetStaff/targetStaff'
				});
			},
			createTarget(){ // 跳转到创建页面
				uni.navigateTo({
				    url: '/subcontractList/targetAdmin/createTarget/createTarget'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.target{
	height: 100vh;
	background-color: #fdfdfd;
	&-nav{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		&-name{
			display: flex;
			align-items: center;
				
			&-surname{
				color: #fff;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #f6c255;
				border-radius: 25rpx;
				margin: 0 15rpx 0 35rpx;
			}
		}
		&-selectTime{
			    width: 355rpx;
			    display: flex;
			    justify-content: space-around;
			    align-items: center;
			    background: #eeeeef;
			    padding: 15rpx;
			    border-radius: 10rpx;
				font-size: 24rpx;
		}
		&-period{
			width: 300rpx;
			height: 55rpx;
			border-radius: 30px;
			border: 1px solid #ebebeb;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.bottom{
				width: 40rpx;
				height: 40rpx;
			}
		}
		&-icon{
			width: 112rpx;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&-unfold{
				width: 40rpx;
				height: 32rpx;
			}
			&-personnel{
				width: 45rpx;
				height: 40rpx;
			}
		}
	}
	
	&-tag{
		margin:15rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&-label{
			background-color: #e1effd;
			padding: 15rpx 20rpx;
			font-size: 24rpx;
			border-radius: 45rpx;
			color: #409eff;
		}
		.isAttention-Btn{
			width: 160rpx;
			.attention{
				background-color: #409eff;
				color: #fff;
				font-size: 26rpx;
			}
		}	
	}
	&-plus{
		position: fixed;
		bottom: 110rpx;
		right: 70rpx;	
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background-color: #409eff;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
		image{
			width: 60rpx;
			height: 60rpx;
		}
	}
	&-list{
		padding: 20rpx;
		&-item{
			width: 100%;
			background-color: #fff;
			box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
			border-radius: 18rpx;
			margin-bottom: 30rpx;
			&-top{
				display: flex;
				&-index{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					&-number{
						width: 60rpx;
						height: 60rpx;
						border-radius: 30rpx;
						color: #409eff;
						background-color: #e1effd;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				&-info{
					flex: 5;
					&-interacting{
						display: flex;
						justify-content: space-between;
						font-size: 26rpx;
						align-items: center;
						padding-right: 25rpx;
						margin: 20rpx 0;
						&-popup{
							display: flex;
							align-items: center;
							image{
								width: 25rpx;
								height: 20rpx;
								margin-right: 10rpx;
							}
						}
						&-love{
							position: relative;
							&-value{
								z-index: 10;
								position: absolute;
								content: "";
								top: 8rpx;
								right: 14rpx;
								font-size: 19rpx;
								color: #fff;
							}
							image{
								width: 45rpx;
								height: 45rpx;
							}
						}
					}
					&-title{
						font-weight: 700;
						margin-bottom: 20rpx;
						font-size: 32rpx;
					}
					&-rank{
						color: #a2a2a2;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-right: 25rpx;
						margin-bottom: 25rpx;
						&-icon{
							display: flex;
							align-items: center;
							image{
								width: 35rpx;
								height: 35rpx;
							}
							.crossBar{
								margin: 0 10rpx;
							}
						}
						&-schedule{
							width: 200rpx;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							z-index: 1;
							&-icon{
								width: 100%;
							}
							&-percentage{
								color: #409eff;
								font-size: 28rpx;
								margin-left: 10rpx;
							}
						}
					}
				}
			}
			&-outcome{
				padding: 0 30rpx;
				font-size: 26rpx;
				line-height: 75rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&-box{
					flex: 1;
					display: flex;
					&-index{
						color: #409eff;
						margin-right: 30rpx;
					}
					&-explain{
						max-width: 450rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				&-schedule{
					display: flex;
					&-box{
						display: flex;
						align-items: center;
						margin-right: 10rpx;
						image{
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
			&-bottom{
				display: flex;
				justify-content: center;
				align-items: center;
				border-top: 1px solid #ededed;

				&-record,&-relevance{
					width: 50%;
					height: 85rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				&-record{
					border-right: 1px solid #ededed;
				}
				.relevanceTag{
					font-size: 24rpx;
					background-color: #dbf1e1;
					color: #19be6b;
					border: 1px solid #71d5a1;
					display: flex;
					justify-content: center;
					margin-right: 15rpx;
					border-radius: 6rpx;
					view{
						padding: 0rpx 15rpx;
					}			
				}
			}
		}
	}
}
</style>
